<template>
  <div>
    <!-- default-expand-all 等价于 :default-expand-all="true" -->
    <el-tree
      ref="refTree"
      :data="list"
      show-checkbox
      check-strictly
      :default-expand-all="true"
      :props="{label: 'name'}"
      node-key="id"
    />
    <el-button type="success" @click="hSubmit">确定</el-button>
    <el-button @click="hClose">取消</el-button>
  </div>
</template>

<script>
import { getPermissionList } from '@/api/permission'
import { getRoleDetail, assignPerm } from '@/api/setting'
import { tranListToTreeData } from '@/utils'
export default {
  props: {
    roleId: { // 当前角色的权限点Id
      type: String,
      required: true
    }

  },
  data() {
    return {
      list: [], // 权限列表-tree数据
      permIds: []
    }
  },
  created() {
    this.loadPermissionDetail() // 获取权限列表
    // this.loadgetRoleDetail() // 获取角色详情，角色现有的权限
  },
  methods: {
    // 点击 取消按钮，通知父组件中关闭弹层
    hClose() {
      this.$emit('closeDialog')
    },
    async loadPermissionDetail() { // 获取所有的权限列表
      const res = await getPermissionList()
      // 数据格式处理，数组转成树状数据
      // 下面这三步打印 函数调用还是没弄明白
      // 因为数组的一顿操作，改变了源数据
      // console.log(res.data)
      // console.log(tranListToTreeData(res.data))
      // console.log(res.data)
      this.list = tranListToTreeData(res.data)
      // console.log(this.list)
    },
    async loadgetRoleDetail() { // 获取角色详情，有角色现有的权限
      const { data } = await getRoleDetail(this.roleId)
      // console.log(data)
      // setCheckedKeys，通过 keys 设置目前勾选的节点,哪个节点被选中,必须设置 node-key属性,node-key的值就是树节点的id
      // 返回的数据data.permIds 就是 这个角色已经有的权限，对应树节点的id被选中
      this.$refs.refTree.setCheckedKeys(data.permIds) // 调用组件的方法
    },
    async hSubmit() {
      // 如何从tree中，取出选中的树节点id
      // getCurrentKey方法	获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null
      const permIds = this.$refs.refTree.getCheckedKeys()
      const res = await assignPerm({ id: this.roleId, permIds: permIds }) // 给角色增加权限 后保存到后台
      // console.log(res)
      this.$emit('closeDialog') // 关闭弹框
      this.$message.success(res.message)
    }
  }
}
</script>

<style>

</style>
